<template>
  <div class="user-profile">
    <div class="profile-left">
      <user-avatar />
      <div class="user-info">
        <div class="nickname-wrapper">
          <template v-if="!isEditingNickname">
            <h2 class="nickname" @click="startEditNickname">
              {{userstore.nickname}}
              <edit-outlined class="edit-icon" />
            </h2>
          </template>
          <template v-else>
            <a-input
              v-model:value="editingNickname"
              size="large"
              @blur="saveNickname"
              ref="nicknameInput"
            />
          </template>
        </div>
        <div class="remark-wrapper">
          <template v-if="!isEditingRemark">
            <p class="remark" @click="startEditRemark">
              {{ userstore.remark || '这个人很懒，什么都没写~' }}
              <edit-outlined class="edit-icon" />
            </p>
          </template>
          <template v-else>
            <a-textarea
              v-model:value="editingRemark"
              :auto-size="{ minRows: 2, maxRows: 3 }"
              :maxlength="200"
              show-count
              @pressEnter="saveRemark"
              @blur="saveRemark"
              ref="remarkInput"
              placeholder="写点什么吧..."
            />
          </template>
        </div>
        <h3 class="greeting">{{greeting}}~</h3>
      </div>
    </div>
    <div class="profile-right">
      <a-descriptions :column="1">
        <a-descriptions-item label="手机号" v-if="userstore.name">
          <phone-outlined /> {{ maskPhoneNumber(userstore.name) }}
        </a-descriptions-item>
        <a-descriptions-item label="性别">
          <template v-if="!isEditingSex">
            <div class="sex-display" @click="startEditSex">
              <template v-if="userstore.sex == '0'">
                <man-outlined style="color: #1677ff"/> 男
              </template>
              <template v-else-if="userstore.sex == '1'">
                <woman-outlined style="color: #eb2f96"/> 女
              </template>
              <template v-else>
                <question-outlined /> 未设置
              </template>
              <edit-outlined class="edit-icon" />
            </div>
          </template>
          <template v-else>
            <a-radio-group 
              v-model:value="editingSex"
              @change="saveSex"
              size="small"
            >
              <a-radio-button value="0">男</a-radio-button>
              <a-radio-button value="1">女</a-radio-button>
            </a-radio-group>
          </template>
        </a-descriptions-item>
        <a-descriptions-item label="邮箱">
          <template v-if="userstore.email">
            <mail-outlined /> {{ maskEmail(userstore.email) }}
          </template>
          <template v-else>
            <a-tag color="warning">未绑定邮箱</a-tag>
          </template>
        </a-descriptions-item>
      </a-descriptions>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, nextTick } from 'vue';
import UserAvatar from './userAvatar.vue';
import userStore from '@/store/modules/user';
import { updateUserInfo } from '@/api/front/user';
import { message } from 'ant-design-vue';
import {
  UserOutlined,
  MailOutlined,
  ManOutlined,
  WomanOutlined,
  QuestionOutlined,
  EditOutlined,
  PhoneOutlined
} from '@ant-design/icons-vue';

const userstore = userStore();

// 问候语
const getGreeting = (): string => {  
  const currentHour = new Date().getHours();
  if (currentHour < 12) {  
    return '早上好';  
  } else if (currentHour < 18) {  
    return '下午好';  
  } else {  
    return '晚上好';  
  }  
};
const greeting = ref(getGreeting());

// 昵称编辑相关
const isEditingNickname = ref(false);
const editingNickname = ref('');
const nicknameInput = ref();

const startEditNickname = () => {
  editingNickname.value = userstore.nickname || '';
  isEditingNickname.value = true;
  nextTick(() => {
    nicknameInput.value?.focus();
  });
};

const saveNickname = async () => {
  if (!editingNickname.value.trim()) {
    message.error('昵称不能为空');
    return;
  }
  
  try {
   
    await updateUserInfo({
      nickname: editingNickname.value.trim()
    });
    
    userstore.nickname = editingNickname.value.trim()
    
    message.success('昵称修改成功');
  } finally {
    isEditingNickname.value = false;
  }
};

// 性别编辑相关
const isEditingSex = ref(false);
const editingSex = ref('');

const startEditSex = () => {
  editingSex.value = userstore.sex || '0';
  isEditingSex.value = true;
};

const saveSex = async () => {
  try {
    await updateUserInfo({
      sex: editingSex.value
    });
    
    userstore.sex = editingSex.value
    
    message.success('性别修改成功');
  } finally {
    isEditingSex.value = false;
  }
};

// 个性签名编辑相关
const isEditingRemark = ref(false);
const editingRemark = ref('');
const remarkInput = ref();

const startEditRemark = () => {
  editingRemark.value = userstore.remark || '';
  isEditingRemark.value = true;
  nextTick(() => {
    remarkInput.value?.focus();
  });
};

const saveRemark = async () => {
  try {
    await updateUserInfo({
      remark: editingRemark.value.trim()
    });

    userstore.remark = editingRemark.value.trim()

    message.success('个性签名修改成功');
  } catch (error) {
    message.error('修改失败，请重试');
  } finally {
    isEditingRemark.value = false;
  }
};

// 添加手机号和邮箱加密方法
const maskPhoneNumber = (phone: string | undefined) => {
  console.log(phone);
  if (!phone) return '';
  return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
};

const maskEmail = (email: string | undefined) => {
  if (!email) return '';
  const [username, domain] = email.split('@');
  if (!domain) return email;

  let maskedUsername = username;
  if (username.length > 3) {
    maskedUsername = username.slice(0, 3) + '*'.repeat(username.length - 3);
  } else {
    maskedUsername = username.slice(0, 1) + '*'.repeat(username.length - 1);
  }

  return `${maskedUsername}@${domain}`;
};
</script>

<style lang="scss" scoped>
.user-profile {
  min-height: 200px;
  border-bottom: 1px solid #e0e0f0;
  display: flex;
  justify-content: flex-start;
  padding: 24px 40px;
  background: #fff;

  .profile-left {
    flex: 1;
    display: flex;
    gap: 24px;
    align-items: center;
    .user-info {
      display: flex;
      flex-direction: column;
      gap: 12px;
      .nickname {
        font-size: 24px;
        font-weight: 500;
        color: #262626;
        margin: 0;
      }
      .greeting {
        font-size: 16px;
        color: #8c8c8c;
        margin: 0;
      }
      .remark-wrapper {
        position: relative;

        .remark {
          display: flex;
          align-items: center;
          gap: 8px;
          margin: 0;
          font-size: 14px;
          color: #8c8c8c;
          cursor: pointer;
          white-space: pre-wrap;
          word-break: break-all;

          &:hover .edit-icon {
            opacity: 1;
          }
        }

        .edit-icon {
          opacity: 0;
          transition: opacity 0.3s;
          font-size: 14px;
          color: #8c8c8c;
        }

        :deep(.ant-input-textarea) {
          width: 300px;

          .ant-input {
            font-size: 14px;
            resize: none;
          }

          .ant-input-data-count {
            font-size: 12px;
            color: #8c8c8c;
            bottom: 5px;
            right: 5px;
          }
        }
      }
    }
  }

  .profile-right {
    width: 300px;
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    padding: 0 24px;
    border-left: 1px solid #f0f0f0;
    height: 100%;
    
    :deep(.ant-descriptions) {
      width: 100%;
    }
    
    :deep(.ant-descriptions-item) {
      padding-bottom: 8px;
      
      .ant-descriptions-item-label {
        color: #8c8c8c;
        font-weight: 500;
        font-size: 15px;
        min-width: 80px;
      }
      
      .ant-descriptions-item-content {
        display: flex;
        align-items: center;
        gap: 8px;
        color: #262626;
        min-height: 24px;
        line-height: 24px;
        font-size: 15px;

        .anticon {
          font-size: 16px;
        }
        
        .ant-tag {
          font-size: 14px;
          padding: 2px 8px;
        }
      }
    }
  }
}

.nickname-wrapper {
  position: relative;
  
  .nickname {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    
    &:hover .edit-icon {
      opacity: 1;
    }
  }
  
  .edit-icon {
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 16px;
    color: #8c8c8c;
  }
}

.sex-display {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  
  &:hover .edit-icon {
    opacity: 1;
  }
  
  .edit-icon {
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 14px;
    color: #8c8c8c;
  }
}

:deep(.ant-input) {
  font-size: 24px;
  font-weight: 500;
  padding: 4px 8px;
  width: 200px;
}
</style> 